import React, {useState}from 'react'
// 16.8之前函数组件不能定义状态
// 16.8之后可以通过hook定义状态 代替类组件的功能
// hook  名字以use开头的函数
// 规则：
// 1. hook只能在函数组件和自定义hook中使用，不能再class组件和普通函数中使用
// 2. 只能在函数组件的最顶层使用，不能在if、for、子函数中使用

// useState: 定义组件的状态，修改状态会更新组件
// useState 更新数据是异步的，无法立即获取到最新的数据
// 如果需要确保获取的是最新数据，可以传入一个函数，函数的参数就是最新值
const App = () => {
  const [count,setCount] = useState(0)
  const add = () => {
    // setCount(count + 1)
    setCount(prev => {
      console.log(prev)
      return prev + 1
    })

    console.log('添加函数内',count)
  }
  // console.log('添加函数外',count)


  return (
    <div>
      <p>
        <button onClick={() => setCount(count - 1)}>-</button>
        {count}
        <button onClick={add}>+</button>
      </p>
    </div>
  )
}

export default App